<!--
 The BSD 3-Clause License

 Copyright 2022 - DATATRONiQ GmbH (https://datatroniq.com)
 Copyright (c) 2018-2022 Klaus Landsdorf (http://node-red.plus/)
 Copyright 2015,2016 - Mika Karaila, Valmet Automation Inc. (node-red-contrib-opcua)
 All rights reserved.
 node-red-contrib-iiot-opcua
-->

<script type="text/javascript">
  RED.nodes.registerType('OPCUA-IIoT-Event', {
    category: 'IIoT',
    color: '#ABCDEF',
    defaults: {
      eventType: {value: 'i=2041', required: true},
      eventTypeLabel: {value: 'BaseTypeEvent'},
      resultType: {value: 'basic'},
      queueSize: {value: 1, required: true, validate: RED.validators.number()},
      usingListener: {value: false},
      name: {value: ''},
      showStatusActivities: {value: false},
      showErrors: {value: false}
    },
    inputs: 1,
    outputs: 1,
    align: 'left',
    icon: 'icon.png',
    label: function () {
      return this.name || 'Event'
    },
    labelStyle: function () {
      return this.name ? 'node_label_italic' : ''
    },
    oneditprepare: function () {
      let node = this
      node.lookupItems = []

      let eventTypeLookupField = $("#node-lookup-eventType")
      let eventTypeField = $("#node-input-eventType")
      let eventTypeLabelField = $("#node-input-eventTypeLabel")

      eventTypeLookupField.click(function () {
        eventTypeLookupField.addClass('disabled')
        $.getJSON('opcuaIIoT/list/EventTypeIds', function (data) {
          eventTypeLookupField.removeClass('disabled')
          node.lookupItems = []

          $.each(data, function (i, entry) {
            node.lookupItems.push({value: entry.nodeId, label: entry.label})
          })

          eventTypeField.autocomplete({
            source: node.lookupItems,
            minLength: 0,
            focus: function (event, ui) {
              eventTypeField.val(ui.item.label);
              return false;
            },
            select: function (event, ui) {
              eventTypeField.val(ui.item.label)
              eventTypeLabelField.val(ui.item.label + ' (' + ui.item.value + ')')
              return false;
            },
            close: function (event, ui) {
              eventTypeField.autocomplete("destroy")
            }
          }).autocomplete("search", "")
        })
      })
    }
  })
</script>

<script type="text/x-red" data-template-name="OPCUA-IIoT-Event">
    <div class="form-row">
        <label for="node-input-eventType"><i class="icon-search"></i> <span data-i18n="opcua-iiot-contrib.label.eventType"></span></label>
        <input type="text" id="node-input-eventType" style="width:40%;" placeholder="i=2041">
        <a id="node-lookup-eventType" class="btn"><i id="node-lookup-topic-icon" class="fa fa-search"></i></a>
        <div style='margin: 20px auto;margin-left: 103px'>
            <p><input type="text" id='node-input-eventTypeLabel' style='width: 80%' readonly></p>
            <p><span data-i18n="opcua-iiot-contrib.label.lookupUseHint"></span></p>
        </div>
    </div>
    <div class="form-row" id="node-inject-resultType">
        <label for=""><i class="fa fa-list"></i> <span data-i18n="opcua-iiot-contrib.label.resultType"></span></label>
        <select id="node-input-resultType" type="text" style="width:140px;">
            <option value="basic" data-i18n="opcua-iiot-contrib.resulttype.label.basic"></option>
            <option value="condition" data-i18n="opcua-iiot-contrib.resulttype.label.condition"></option>
            <option value="state" data-i18n="opcua-iiot-contrib.resulttype.label.state"></option>
            <option value="all" data-i18n="opcua-iiot-contrib.resulttype.label.all"></option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-queueSize"><i class="icon-time"></i> <span data-i18n="opcua-iiot-contrib.label.queueSize"></span></label>
        <input type="number" id="node-input-queueSize" placeholder="">
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="node-red:common.label.name"></span></label>
        <input type="text" id="node-input-name" placeholder="">
    </div>
    <hr>
    <div class="form-row">
        <label style="min-width:160px" for="node-input-usingListener"><i class="fa fa-assistive-listening-systems"></i>
        <span data-i18n="opcua-iiot-contrib.label.usingListener"></span></label>
        <input type="checkbox" id="node-input-usingListener" style="max-width:30px">
    </div>
    <hr>
    <div class="form-row">
        <label style="min-width:160px" for="node-input-showStatusActivities"><i class="fa fa-bolt"></i>
        <span data-i18n="opcua-iiot-contrib.label.showActivities"></span></label>
        <input type="checkbox" id="node-input-showStatusActivities" style="max-width:30px">
    </div>
    <div class="form-row">
        <label style="min-width:160px" for="node-input-showErrors"><i class="fa fa-exclamation-circle"></i>
        <span data-i18n="opcua-iiot-contrib.label.showErrors"></span></label>
        <input type="checkbox" id="node-input-showErrors" style="max-width:30px">
    </div>
</script>

<script type="text/x-red" data-help-name="OPCUA-IIoT-Event">
    <h2>OPC UA IIoT Event</h2>

    <p>
        The Event node is to set up an event listener with parameters.
        It is to trigger by an Inject of Node-RED or by the OPC UA IIoT Inject.
        It could also trigger with incoming events from other nodes.
    </p>

    <h3>Input</h3>

    <p>msg with addressSpaceItems</p>

    <h3>Output</h3>
    <div>
        <strong>Event message:</strong>

        <ul>
            <li>payload (number/Object)
            <ul>
                <li>eventType (ObjectTypeId)
                <li>eventFilter (Array of conditions or events)
                <ul>
                    <li>selectClause (Array)
                    <li>whereClause (Object)
                </ul>
                <li>eventFields (Array)
                <li>queueSize (counter)
                <li>interval (number msec.)
            <ul>
            <li>topic
            <li>nodetype (events)
        </ul>
    </div>

    <strong>Name</strong>
    <p>Name in the flow of Node-RED.</p>

</script>
